<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>首页 - 学生管理系统</title>
<link rel="stylesheet" href="css/public.css">
<script>
function setActive() {
    var buttons = document.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            for (var j = 0; j < buttons.length; j++) {
                buttons[j].classList.remove('active');
            }
            this.classList.add('active');
        });
    }
}
</script>
</head>
<body onload="setActive()">
<header>
    <h1>学生管理系统</h1>
    <nav>
        <button class="active">首页</button>
        <a href="pages/student.html"><button>学生管理</button></a>
        <a href="pages/clas.html"><button>班级管理</button></a>
    </nav>
</header>

<main>
    <h2>学生信息表(示例表格)</h2>

    <!-- 搜索框 -->
    <div class="search_box">
        <input type="text" id="searchInput" placeholder="(未实现效果)输入姓名或学号进行搜索..." onkeyup="filterTable()">
    </div>

    <!-- 表格内容 -->
    <table id="studentTable" class="table_main">
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td data-label="学号">2021001</td>
            <td data-label="姓名">张三</td>
            <td data-label="性别">男</td>
            <td data-label="年龄">20</td>
            <td data-label="班级">计算机一班</td>
        </tr>
        <tr>
            <td data-label="学号">2021002</td>
            <td data-label="姓名">李四</td>
            <td data-label="性别">女</td>
            <td data-label="年龄">21</td>
            <td data-label="班级">软件工程二班</td>
        </tr>
        <tr>
            <td data-label="学号">2021003</td>
            <td data-label="姓名">王五</td>
            <td data-label="性别">男</td>
            <td data-label="年龄">22</td>
            <td data-label="班级">数据科学一班</td>
        </tr>
        </tbody>
    </table>
</main>

</body>
</html>